<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>动态路由匹配</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="generator" content="GitBook 3.2.2">
    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style type="text/css">
    #app a {
        display: block;
    }
    </style>
</head>

<body>
    <div id="app">
        <p>
            <router-link to="/user/foo">/user/foo</router-link>
            <router-link to="/user/bar">/user/bar</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script type="text/javascript">
    const User = {
        template: `<div>User {{ $route.params.id }}</div>`,
        watch: {
            '$route' (to, from) {
                // 对路由变化作出响应...
                console.log(to);
                console.log(from);
            }
        }
    }


    const router = new VueRouter({
        routes: [{
            path: '/user/:id',
            component: User
        }]
    })

    const app = new Vue({
        router
    }).$mount('#app')
    </script>
</body>

</html>
